<!--
 * @Description: 
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-07-20
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-03-21
-->

<script lang="ts" setup>
  defineOptions({ name: '404' })
  import { reactive } from 'vue'

  import ForbiddenPng from '/@/assets/images/sys/error/403.png'
  import NotFoundPng from '/@/assets/images/sys/error/404.png'
  import ServerErrorPng from '/@/assets/images/sys/error/500.png'

  const state = reactive({
    defaultError: '404',
    statusMap: {
      404: {
        text: '抱歉，你访问的页面不存在',
        icon: NotFoundPng,
      },
      403: {
        text: '抱歉，你无权访问该页面',
        icon: ForbiddenPng,
      },
      500: {
        text: '抱歉，服务器出错了',
        icon: ServerErrorPng,
      },
    },
  })
  const onBack = () => {
    window.location.href = '/'
  }
</script>

<template>
  <div class="not-found">
    <div class="nf-main">
      <img class="nf-icon" :src="state.statusMap[state.defaultError].icon" />
      <div class="nf-info">
        <h1>{{ state.defaultError }}</h1>
        <p>{{ state.statusMap[state.defaultError].text }}</p>
        <b-button type="primary" @click="onBack">返回首页</b-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  /* stylelint-disable-next-line media-feature-range-notation */
  @media screen and (max-width: 1000px) {
    .not-found {
      .nf-main {
        flex-direction: column;

        .nf-icon {
          margin-right: 0;
        }

        .nf-info {
          margin-top: 16px;
          display: flex;
          align-items: center;
          flex-direction: column;
        }
      }
    }
  }

  .not-found {
    background: #fff;
    border-radius: 2px;
    height: 100%;
    min-height: 268px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .nf-main {
      display: flex;
      align-items: center;

      .nf-icon {
        width: 438px;
        height: 268px;
        object-fit: contain;
        margin-right: 120px;
      }

      .nf-info {
        > h1 {
          margin: 0;
          font-size: 56px;
          font-weight: 500;
          color: #040714;
          line-height: 64px;
        }

        > p {
          margin: 8px 0 24px;
          font-size: 16px;
          font-weight: 400;
          color: #5c5e66;
          line-height: 24px;
        }
      }
    }
  }
</style>
